<template>
  <div class="menu">
    <div
      v-for="item in menuList"
      :key="item.id"
      class="icon"
      @click="jump(item)">
      <i
        class="geek-icon"
        v-html="item.icon"></i>
      <div class="name">{{ item.name }}</div>
    </div>
  </div>
  <van-popup
    v-model:show="showPicker"
    round
    position="bottom">
    <van-picker
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm" />
  </van-popup>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, inject } from 'vue';
const share: any = inject('share');
const showPicker = ref<Boolean>(false);
const router = useRouter();
const columns = ref([
  { text: '视频', value: 'Video' },
  { text: '单图', value: 'image' },
  { text: '组图', value: 'allImage' }
]);
const menuList = [
  {
    icon: '&#xe647;',
    name: '分享'
  },
  {
    icon: '&#xe60b;',
    name: '',
    path: '/add'
  },
  {
    icon: '&#xe61d;',
    name: '我的',
    path: '/user'
  }
];
const jump = (item: any) => {
  if (item.path === '/add') {
    showPicker.value = true;
    return;
  }
  if (item.name === '分享') {
    share();
    return;
  }
  if (item.path) {
    router.push(item.path);
  }
};
const onConfirm = (value: any) => {
  showPicker.value = false;
  router.push(`/add?type=${value.selectedValues[0]}`);
};
</script>

<style lang="scss" scoped>
.menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ccc;
  .icon {
    text-align: center;
    &:nth-child(1) {
      .geek-icon {
        font-size: 30px;
      }
    }
    &:nth-child(2) {
      .geek-icon {
        font-size: 50px;
        color: rgb(255, 166, 0);
      }
    }
    &:nth-child(3) {
      .geek-icon {
        font-size: 35px;
      }
    }

    .name {
      font-size: 20px;
      color: #999;
      margin-top: 10px;
    }
  }
}
</style>
